<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';
  import axios from "axios";
  export default {
    data() {
      return{
        currentCate:'',
        cateShow:false,
        sinput:'',
        loading:false,
        searchResult:[1]
      }
    },
    methods: {
      toHome() {
        this.$router.push('/home')
      },
      toDetail(id) {
        if(this.$route.path=="/detail") {
          this.$router.push({path: '/detail', query: {id: id}})
          location.reload()
        } else {
          this.$router.push({path: '/detail', query: {id: id}})
        }
      },
      toRecord() {
        this.$router.push('/record')
        this.currentRouter='3'
      },
      toCate(type) {
        this.$router.push('/categroy/'+type)
        if(this.$route.params.cate!=this.currentCate){
          location.reload()
        }
        this.currentRouter=this.$route.params.cate
      },
      toFriends() {
        this.$router.push('/friends')
      },
      showCate() {
        if(this.cateShow==false) {
          this.cateShow=true
        } else {
          this.cateShow=false
        }
      },
      search() {
        if(this.sinput.length==0) {
          this.searchResult='1'
          this.loading=true
          return
        }
        this.loading=true
        //发送搜索请求
        axios.put('/search',this.$qs.stringify({target:this.sinput})).then(res=> {
          this.searchResult=res.data.data
        })
        this.loading=false;
      },
      searchShow() {
        if(this.sinput.length!=0) {
          this.$refs.searchContainer.style.height='200px'
          this.search()
          return
        }
        this.$refs.searchContainer.style.height='200px'
        this.loading=true
      },
      searchFade() {
        this.$refs.searchContainer.style.height='0px';
        this.loading=false
      }
    },
    mounted() {
      document.addEventListener('click',e=>{
        if(!this.$el.contains(e.target)){
          this.$refs.searchContainer.style.height='0px';
          this.loading=false
        }
      })
    }
  }
</script>

<template>

  <el-menu router ref="nav" mode="horizontal" active-text-color="#FF7F27" class="nav" :default-active="this.$route.path">
    <div style="width: 200px"></div>
    <el-image class="small-logo" :src="require('../assets/images/logo.png')"></el-image>
    <el-menu-item index="/home" @click="toHome" class="el-menu-item is-active"><i class="el-icon-my-home nav-icon"></i>首页</el-menu-item>
    <el-menu-item @click="showCate"><i class="el-icon-my-cate nav-icon"></i>分类<i class="el-icon-arrow-down"></i>
      <transition name="normal-expand">
        <div class="cate" v-show="cateShow">
          <div class="c" @click="toCate('学习笔记')" style="border-top-left-radius: 10px;border-top-right-radius: 10px"><div style="position: relative;bottom: 13px;">学习笔记</div></div>
          <div class="c" @click="toCate('个人项目')"><div style="position: relative;bottom: 13px">个人项目</div></div>
          <div class="c" @click="toCate('技术杂烩')"><div style="position: relative;bottom: 13px">技术杂烩</div></div>
          <div class="c" @click="toCate('心情随写')" style="border: none;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px"><div style="position: relative;bottom: 13px">心情随写</div></div>
        </div>
      </transition>
    </el-menu-item>
    <el-menu-item @click="toRecord" index="/record"><i class="el-icon-my-record nav-icon"></i>归档</el-menu-item>
    <el-menu-item index="/moments"><i class="el-icon-my-dynamic nav-icon" style="width: 25px;height: 25px"></i>动态
    </el-menu-item>
    <el-menu-item index="/friends"><i class="el-icon-my-friend nav-icon"></i>友链</el-menu-item>
    <el-menu-item index="/about"><i class="el-icon-my-about nav-icon"></i>关于我</el-menu-item>
    <el-input  @focus="searchShow" @input="search" class="search" v-model="sinput" suffix-icon="el-icon-my-search" placeholder="搜索"></el-input>
    <div ref="searchContainer"  v-loading="loading" class="searchContainer">
      <div v-if="searchResult.length==0" style="margin-top: 10px;margin-left: 10px;font-size: 15px">未搜索到结果</div>
      <div @click="toDetail(item.id)" class="search-one" v-for="item in searchResult">
        <div class="search-one-title">{{item.title}}</div>
        <div class="search-one-target">{{item.content}}</div>
      </div>
    </div>
  </el-menu>
</template>

<style>

  @import "animate.css";
  @import "../assets/common.css";
  .el-loading-mask {
    border-radius: 10px;
  }
</style>
<style src="../assets/detail.css"  scoped>
</style>

